
<template>
  <mu-paper :z-depth="1" class="lan-loadmore-body bg-normal">
    <mu-appbar color="primary" class="lan-header">
      <mu-button icon slot="left" v-close>
        <i class="iconfont angle-left iconangle-left"></i>
        <span class="lan-header-back">返回</span>
      </mu-button>专项会议
      <mu-button icon slot="right" @click="searchcontroll = true">
        <!-- <mu-icon value="more"></mu-icon> -->
        <i class="iconfont iconshaixuan4"></i>
      </mu-button>
    </mu-appbar>
    <mu-container ref="container" class="lan-loadmore-content">
      <mu-load-more
        @refresh="refresh"
        :refreshing="refreshing"
        :loading="loading"
        @load="load"
        :loaded-all="loadAll"
      >
        <!-- 这里是业务结构 -->
        <mu-paper
          class="lan-card"
          :z-depth="1"
          v-for="(item,index) in data"
          :key="index"
          @click="goDetail(item)"
        >
          <div class="lan-detail">
            <span class="lan-detail-h">项目名称：</span>
            <span class="lan-detail-r">{{item.projectName}}</span>
          </div>
          <div class="lan-detail">
            <span class="lan-detail-h">会议名称：</span>
            <span class="lan-detail-r">{{item.meetName}}</span>
          </div>
          <div class="lan-detail">
            <span class="lan-detail-h">会议类型：</span>
            <span class="lan-detail-r" v-if="item.meetType == '1'">质量周例会</span>
            <span class="lan-detail-r" v-if="item.meetType == '2'">质量专项检查会</span>
            <span class="lan-detail-r" v-if="item.meetType == '3'">其他</span>
          </div>
          <div class="lan-detail">
            <span class="lan-detail-h">会议时间：</span>
            <span class="lan-detail-r">{{item.meetTime}}</span>
          </div>
        </mu-paper>
        <p v-if="loadAll && data.length > 5" class="nodataTips">无更多数据了</p>
      </mu-load-more>
      <NoData v-if="data.length <= 0 && loaded" />
    </mu-container>
    <!-- 详情 -->
    <mu-dialog
      width="100%"
      transition="slide-right"
      fullscreen
      :open.sync="detailController"
      class="lan-dialog"
    >
      <mu-appbar color="primary" class="lan-header">
        <mu-button icon slot="left" @click="detailController = false">
          <i class="iconfont angle-left iconangle-left"></i>
          <span class="lan-header-back">返回</span>
        </mu-button>专项会议详情
      </mu-appbar>
      <div class="lan-dialog-body no-padding">
        <div class="lan-detail-list">
          <span class="lan-detail-h">项目名称</span>
          <span class="lan-detail-r">{{Detail.projectName}}</span>
        </div>
        <div class="lan-detail-list">
          <span class="lan-detail-h">会议名称</span>
          <span class="lan-detail-r">{{Detail.meetName}}</span>
        </div>
        <div class="lan-detail-list">
          <span class="lan-detail-h">会议类型</span>
          <span class="lan-detail-r" v-if="Detail.meetType == '1'">质量周例会</span>
          <span class="lan-detail-r" v-if="Detail.meetType == '2'">质量专项检查会</span>
          <span class="lan-detail-r" v-if="Detail.meetType == '3'">其他</span>
        </div>
        <div class="lan-detail-list">
          <div class="lan-detail-list-box">
            <p class="lan-detail-h">会议时间</p>
            <span class="">{{(Detail.meetTime || '').replace(/年/g,'.').replace(/月/g,'.').replace(/日/g,'')}}</span>
          </div>
        </div>
        <div class="lan-detail-list">
          <span class="lan-detail-h">参会人数</span>
          <span class="lan-detail-r">{{Detail.meetPeopleNum || '0'}}人</span>
        </div>
        <div class="lan-detail-list">
          <span class="lan-detail-h">创建人</span>
          <span class="lan-detail-r">{{Detail.createdUserName}}</span>
        </div>
        <div class="lan-detail-list">
          <span class="lan-detail-h">创建时间</span>
          <span class="lan-detail-r">{{Detail.createdTime}}</span>
        </div>
        <div class="lan-detail-list">
          <div class="lan-detail-list-box">
            <p class="lan-detail-h">图片</p>
            <div class="img-box">
              <img :src="list" :preview="index" v-for="(list,index) in handurl(Detail.images)" :key="index" />
            </div>
          </div>
        </div>
        <div class="lan-detail-list">
          <div class="lan-detail-list-box">
            <p class="lan-detail-h">文件</p>
            <p
              class="lan-detail-r"
              v-for="(list,index) in handurl(Detail.files)"
              :key="index"
              @click="loadFile({url:list,name:list.substr(list.lastIndexOf('/')+1)})"
            >
              <span class="lan-fileName">{{list.substr(list.lastIndexOf('/')+1)}}</span>
            </p>
          </div>
        </div>
      </div>
    </mu-dialog>
    <!-- 筛选 -->
    <mu-dialog
      width="100%"
      transition="slide-right"
      fullscreen
      :open.sync="searchcontroll"
      class="lan-dialog"
    >
      <mu-appbar color="primary" class="lan-header">
        <mu-button icon slot="left" @click="searchcontroll = false">
          <i class="iconfont angle-left iconangle-left"></i>
          <span class="lan-header-back">返回</span>
        </mu-button>筛选条件
        <mu-button icon slot="right" @click="clearSearch">
          <span class="text">清空</span>
        </mu-button>
      </mu-appbar>
      <!-- <mu-bottom-sheet :open.sync="searchcontroll"> -->
      <mu-list class="lan-dialog-body no-padding bg-default">
        <mu-form :model="form" class="mu-lan-form" :label-position="'left'" label-width="25%">
          <mu-form-item label="开始时间">
            <mu-date-input
              v-model="form.startMeetTime"
              placeholder="请选择"
              format="YYYY-MM-DD"
              value-format="YYYY-MM-DD 00:00:00"
              container="bottomSheet"
              label-float
            ></mu-date-input>
            <i class="iconfont angle-left iconangle-right"></i>
          </mu-form-item>
          <mu-form-item label="结束时间">
            <mu-date-input
              v-model="form.endMeetTime"
              placeholder="请选择"
              format="YYYY-MM-DD"
              value-format="YYYY-MM-DD 23:59:59"
              container="bottomSheet"
              label-float
            ></mu-date-input>
            <i class="iconfont angle-left iconangle-right"></i>
          </mu-form-item>
          <mu-form-item label="项目名称">
            <mu-select
              v-model="form.projectId"
              placeholder="请选择"
              popover-class="lan-popover-select"
            >
              <mu-option
                v-for="(list,index) in projectList"
                :key="index"
                :label="list.projectName"
                :value="list.projectId"
              ></mu-option>
            </mu-select>
            <i class="iconfont angle-left iconangle-right"></i>
          </mu-form-item>
          <mu-form-item label="会议名称">
            <mu-text-field v-model="form.meetName" placeholder="请输入"></mu-text-field>
            <i class="iconfont angle-left iconangle-right"></i>
          </mu-form-item>
          <mu-form-item label="会议类型">
            <mu-select v-model="form.meetType" placeholder="请选择" popover-class="lan-popover-select">
              <mu-option
                v-for="(list,index) in typeList"
                :key="index"
                :label="list.name"
                :value="list.value"
              ></mu-option>
            </mu-select>
            <i class="iconfont angle-left iconangle-right"></i>
          </mu-form-item>
        </mu-form>
        <mu-list-item class="lan-dialog-sumit lan-block-btn-line">
          <mu-button full-width color="primary" class="lan-block-btn" @click="search">确认</mu-button>
        </mu-list-item>
      </mu-list>
    </mu-dialog>

    <FilePreview :fileUrl="fileUrl" :open="filePreview" @close="filePreview = false"></FilePreview>
  </mu-paper>
</template>

<script>
import FilePreview from "@/preview/FilePreview.vue"
export default {
  name: "MapShow",
  components: {
      FilePreview
    },
  data() {
    return {
      refreshing: false,
      loading: false,
      loaded: false,
      loadAll: false,
      pageSize: 10,
      pageNo: 0,
      totalPage: 1,
      data: [],
      detailController: false,
      Detail: {},
      searchcontroll: false,
      form: {
        projectId: "",
        startMeetTime: "",
        endMeetTime: "",
        meetType: "",
        meetName: ""
      },
      typeList: [
        { value: "1", name: "质量周例会" },
        { value: "2", name: "质量专项检查会" },
        { value: "3", name: "其他" }
      ],
      projectList: [],
      filePreview:false,
      fileUrl:''
    };
  },
  async created() {
    this.getData(this.form);
    this.projectList = await this.$A.comData("projectList");
  },
  methods: {
    async refresh() {
      this.refreshing = true;
      this.pageNo = 0;
      this.totalPage = 1;
      this.loaded = false;
      this.loadAll = false;
      this.data = [];
      this.$refs.container.scrollTop = 0;
      await this.getData(this.form);
      this.refreshing = false;
    },
    search() {
      this.loaded = false;
      this.loadAll = false;
      this.pageSize = 10;
      this.pageNo = 0;
      this.totalPage = 1;
      this.data = [];
      this.searchcontroll = false;
      this.getData(this.form);
    },
    clearSearch() {
      this.form = {
        projectId: "",
        startMeetTime: "",
        endMeetTime: "",
        meetType: "",
        meetName: ""
      };
    },
    async getData(params) {
      if (this.pageNo >= this.totalPage) {
        this.loadAll = true;
        return;
      }
      this.$openLoading();
      if (!this.loadAll) {
        this.pageNo += 1;
      } else {
        return;
      }
      let obj = {
        obj: {
          // "orgId":this.$A.GS('orgInfo')['orgId'],
          // "type":this.$A.GS('orgInfo')['type'],
        },
        pageNo: this.pageNo,
        pageSize: this.pageSize
      };
      if (params) {
        Object.assign(obj.obj, params);
      }
      this.$A.Go('post','/safety/meeting/select',obj).then(success=>{
          if(success.code == 200){
            let data = success.body.rows || []
            let total = success.body.page.rows || '0'
            this.totalPage = Math.ceil(total/this.pageSize)
            // let data =  []
            // let total = 0
            if(this.pageNo == 1){
              this.data = data;
            }else{
              this.data.push(...data);
            }
            if(total == 0 || Math.ceil(total/this.pageSize) <= this.pageNo || data.length <= 0){
              this.loadAll = true;
            }
          } else {
            this.data = [];
          }
          this.loaded = true;
          this.$closeLoading();
        },
        function(err) {
          console.warn(err);
        }
      );
    },
    async load() {
      this.loading = true;
      await this.getData(this.form);
      this.loading = false;
    },
    goDetail(list) {
      this.$A.comData('meetLook',list.id)
      this.Detail = list;
      this.detailController = true;
    },
    handurl(str) {
      if (!str) {
        return [];
      } else {
        return str.split(",");
      }
    },
    loadFile(list) {
      alert(1)
      this.fileUrl = list.url
      this.filePreview = true;
      
      // let a = document.createElement("a");
      // a.setAttribute("href", list.url);
      // a.setAttribute("download", list.name);
      // a.click();
    }
  }
};
</script>

<style lang="scss" scoped>
.img-box {
  img {
    width: 80px;
    height: 80px;
    float: left;
    margin: 5px 8px;
  }
}
.lan-form-title {
  line-height: 40px;
}
</style>
